<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Space from "./Space.svelte";
    import { fn } from "storybook/test";
    import type { SpaceOptions } from "./Space";
    import { _ } from "svelte-i18n";

    // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
    const { Story } = defineMeta({
        title: "Components/Layout/Space",
        component: Space,
        tags: ["autodocs"],
        argTypes: {
            dir: {
                control: { type: "select" },
                options: ["h", "v"],
                table: {
                    defaultValue: { summary: "h" },
                },
            },
            align: {
                control: { type: "select" },
                options: ["start", "center", "end"],
            },
            justify: {
                control: { type: "select" },
                options: ["start", "center", "end"],
            },
            wrap: {
                control: { type: "boolean" },
            },
            size: {
                control: { type: "number" },
                table: {
                    defaultValue: { summary: "8" },
                },
            },
        },
        args: {},
    });
</script>

<Story name="Dir" args={{ dir: "h" }}>
    {#snippet template(args)}
        <Space {...args}>
            <div class="space-item"></div>
            <div class="space-item"></div>
            <div class="space-item"></div>
        </Space>
    {/snippet}
</Story>

<Story name="Size" args={{ size: 16 }}>
    {#snippet template(args)}
        <Space {...args}>
            <div class="space-item"></div>
            <div class="space-item"></div>
            <div class="space-item"></div>
        </Space>
    {/snippet}
</Story>

<Story name="Align">
    {#snippet template(args)}
        <Space>
            {#each ["start", "center", "end", "baseline"] as align}
                <Space align={align as SpaceOptions["align"]} style="border: 1px solid #dfdfdf; padding: 8px; width: 200px">
                    <span>{align}</span>
                    <div class="space-item"></div>
                    <div style="height: 100px; background: rgba(200,200,200,0.3); line-height: 100px">Block</div>
                </Space>
            {/each}
        </Space>
    {/snippet}
</Story>

<Story name="Align-vertical">
    {#snippet template(args)}
        <Space>
            {#each ["start", "center", "end", "baseline"] as align}
                <Space align={align as SpaceOptions["align"]} dir="v" style="border: 1px solid #dfdfdf; padding: 8px; width: 200px">
                    <span>{align}</span>
                    <div class="space-item"></div>
                    <div style="width: 100px; background: rgba(200,200,200,0.3); line-height: 35px">Block</div>
                </Space>
            {/each}
        </Space>
    {/snippet}
</Story>

<Story name="Justify">
    {#snippet template(args)}
        <Space>
            {#each ["start", "center", "end"] as justify}
                <Space align="center" justify={justify as SpaceOptions["justify"]} style="border: 1px solid #dfdfdf; padding: 8px; width: 200px">
                    <span>{justify}</span>
                    <div class="space-item"></div>
                    <div style="height: 100px; background: rgba(200,200,200,0.3); line-height: 100px">Block</div>
                </Space>
            {/each}
        </Space>
    {/snippet}
</Story>

<Story name="Justify-vertical">
    {#snippet template(args)}
        <Space>
            {#each ["start", "center", "end"] as justify}
                <Space align="center" dir="v" justify={justify as SpaceOptions["justify"]} style="border: 1px solid #dfdfdf; padding: 8px; width: 200px; height: 200px;">
                    <span>{justify}</span>
                    <div class="space-item"></div>
                    <div style="width: 100px; background: rgba(200,200,200,0.3); line-height: 35px">Block</div>
                </Space>
            {/each}
        </Space>
    {/snippet}
</Story>
